<!DOCTYPE html>
<!-- 在html标签中加入thymeleaf 的命名空间 xmlns ==> xml name space -->
<html lang="en" xmlns:th="www.thymeleaf.org" >
<head>
<meta charset="UTF-8">
<title>index插件页</title>
</head>
<body>
    <div class="main-wrapper" th:fragment="indexBody" >
	    <section class="cta-section theme-bg-light py-5">
		    <div class="container text-center">
			    <h2 class="heading">欢迎来到俊羽的博客</h2>
			    <div class="intro">如果你想第一时间看到我的博客内容，请输入邮箱后点击订阅按钮。</div>
			    <div class="signup-form form-inline justify-content-center pt-3">
                    <div class="form-group">
                        <label class="sr-only" for="semail">您的邮箱</label>
                        <input type="email" id="semail" name="semail1" class="form-control mr-md-1 semail" placeholder="请输入邮箱">
                    </div>
                    <button onclick="toSubscribe()" class="btn btn-primary">&nbsp;&nbsp;订&nbsp;阅&nbsp;&nbsp;</button>
                </div>
		    </div><!--//container-->
	    </section>
	    <section class="blog-list px-3 py-5 p-md-5">
		    <div class="container">
		    
			    <div class="item mb-5" th:each="articlePage:${articlePages}" >
				    <div class="media">
					    <img class="mr-3 img-fluid post-thumb d-none d-md-flex" th:src="${articlePage.titleImages==null||articlePage.titleImages==''}?'assets/images/blog/blog-post-thumb-1.jpg':${articlePage.titleImages}" alt="image"><!-- 博客显示图片 -->
					    <div class="media-body">
						    <h3 class="title mb-1"><a th:href="'javascript:toArticle('+${articlePage.id}+')'" th:text="${articlePage.title}">Why Every Developer Should Have A Blog</a></h3><!-- 博客标题 -->
						    <div class="meta mb-1">
						        <span class="date" th:text="'发表 '+${articlePage.createTime}">发表 2020-01-23 12:50</span><span class="comment">
						        <span class="date" th:text="'修改 '+${articlePage.modifyTime}">修改 2020-01-23 12:50</span><span class="comment">
						        <span class="time" th:text="${articlePage.readNum}+'阅读'">5 阅读</span><span class="comment"><a href="#" th:text="${articlePage.commNum}+'评论'">8 评论</a></span>
						        <span class="comment" th:text="${articlePage.agreeNum}+'点赞'">2 点赞</span></div>
						    <div class="intro" style="display: none;" th:id="'d'+${articlePage.id}"  th:utext="${articlePage.content}">文章简略...</div>
						    <p class="intro" th:id="'p'+${articlePage.id}"></p>
	                        <script type="text/javascript" th:inline="javascript">
	        	                var p = p[[${articlePage.id}]];
	        	                var d = d[[${articlePage.id}]];
	        	                p.innerText=d.innerText.substring(0,100).replace(/[\r\n]/g,"")+"......";
	                        </script>
						    <a class="more-link" th:href="'javascript:toArticle('+${articlePage.id}+')'">Read more &rarr;</a><!-- 文章地址 -->
					    </div><!--//media-body-->
				    </div><!--//media-->
			    </div><!--//item-->
			    
			    <nav class="blog-nav nav nav-justified my-5">
				  <a class="nav-link-prev nav-item nav-link d-none rounded-left" href="#">Previous<i class="arrow-prev fas fa-long-arrow-alt-left"></i></a>
				  <a class="nav-link-next nav-item nav-link rounded" href="javascript:toList()">Next<i class="arrow-next fas fa-long-arrow-alt-right"></i></a>
				</nav>
				
		    </div>
	    </section>
	    
	    <footer class="footer text-center py-2 theme-bg-dark">
		   
	       <small class="copyright">2020-01-25 制作完成，欢迎大家访问<a target="_blank" href="#">俊羽的博客</a></small><!-- # 是服务器博客地址 -->
		   
	    </footer>
    
    </div><!--//main-wrapper-->
    
    <div class="div-container" id="div-container" th:fragment="alertTelBox" style="display: block;">
		<div class="div-child-container">
			<div class="div-child">
				<table>
					<tr>
						<th>&nbsp;</th>
						<th>&nbsp;</th>
					</tr>
					<tr>
						<td>QQ</td>
						<td>1352611140</td>
					</tr>
					<tr>
						<td>邮箱</td>
						<td>1352611140@qq.com</td>
					</tr>
					<tr>
						<td>GitHub</td>
						<td><a href="https://github.com/shenjuyu">https://github.com/shenjuyu</a></td>
					</tr>
				</table>
				<div class="my-btn">
					<button class="btn btn-primary" id="confrim" onclick="confrim()">确认</button>
				</div>
			</div>
		</div>
	</div>
    
    <div class="div-container" id="div-container" th:fragment="alertBox" style="display: block;">
		<div class="div-child-container">
			<div class="div-child">
				<br/>
				<br/>
				<span th:text="${result.message}" style="font-size: 35px;font-weight: bold;"></span>
				<div class="my-btn">
					<button class="btn btn-primary" id="confrim" onclick="confrim()">确认</button>
				</div>
			</div>
		</div>
	</div>
</body>
</html>